<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_header_include::frag(~{::title},~{::link},~{::style})">
    <link rel="stylesheet" href="" id="skinCss">
    <title>消息中心</title>
</head>

<body>
    <div id="addDialog" class="mainPadding merchantMainPadding" style="display: none;">
        <el-breadcrumb separator="/" class="elBreadcrumb marginB20"
            style="font-size: 12px;margin-bottom: 15px;margin-left: 20px;">
            <el-breadcrumb-item>Home</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>消息中心</el-breadcrumb-item>
        </el-breadcrumb>
        <template>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="业务消息" name="business" ref="business">
                    <!-- <el-row class="marginB20">
                    <el-button type="success" @click="changeBussState">标记已读</el-button>
                </el-row> -->
                    <div class="merchantMainSearchBar">
                        <div class="firstSearch">
                            <el-form :inline="true" :model="businessForm" class="demo-form-inline">
                                <el-form-item label="消息内容:" label-width="84px">
                                    <el-input v-model="businessForm.content" placeholder="消息内容"></el-input>
                                </el-form-item>
                                <el-form-item label="请选择:" label-width="84px">
                                    <el-select v-model="businessForm.status" placeholder="请选择">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                                <div class="establishTime">
                                    <div class="topTitle">接收时间:</div>
                                    <div class="lowerTimer">
                                        <el-form-item label-width="84px">
                                            <el-date-picker v-model="businessForm.date1" type="datetime"
                                                placeholder="选择日期时间">
                                            </el-date-picker>
                                        </el-form-item>
                                        <el-form-item label="—" class="widthauto" style="margin-right: 10px;">
                                            <el-date-picker v-model="businessForm.date2" type="datetime"
                                                placeholder="选择日期时间">
                                            </el-date-picker>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-form>
                        </div>
                        <div class="lastSearch">
                            <el-button class="maechantButon" type="primary" @click="onBussSubmit">搜索</el-button>
                            <el-button class="maechantButon" type="success" @click="changeBussState">标记已读
                            </el-button>
                        </div>
                    </div>
                    <div class="mainSearchBg">
                        <el-table :data="businessData" @selection-change="handleSelectionChange"
                            @row-dblclick="showBussMx" tooltip-effect="light">
                            <el-table-column type="selection" width="100"></el-table-column>
                            <el-table-column property="title" stripe label="标题" width="200" show-overflow-tooltip
                                align="center">
                                <!--:formatter="formatTitle"-->
                                <template slot-scope="scope">
                                    <span class="span" style="white-space: nowrap" v-if="scope.row.status==0">
                                        <li class="tip"></li>{{ scope.row.title }}
                                    </span>
                                    <span class="span" style="color: #a4adbd;white-space: nowrap;" v-else>
                                        <li class="tip1"></li>{{ scope.row.title }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column property="content" label="消息内容" show-overflow-tooltip align="center">
                                <template slot-scope="scope">
                                    <span style="white-space: nowrap"
                                        v-if="scope.row.status==0">{{ scope.row.content }}</span>
                                    <span style="color: #a4adbd;white-space: nowrap;"
                                        v-else>{{ scope.row.content }}</span>
                                </template>
                            </el-table-column>
                            <!--:formatter="formatContent"-->
                            <el-table-column property="receiveTime" label="接收时间" width="200" align="center">
                                <template slot-scope="scope">
                                    <span style="white-space: nowrap"
                                        v-if="scope.row.status==0">{{ scope.row.receiveTime }}</span>
                                    <span style="color: #a4adbd;white-space: nowrap;"
                                        v-else>{{ scope.row.receiveTime }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column property="status" label="消息状态" min-width="200" align="center">
                                <template slot-scope="scope">
                                    <span style="white-space: nowrap" v-if="scope.row.status==0">未读</span>
                                    <span style="color: #a4adbd;white-space: nowrap;" v-else>已读</span>
                                </template>
                            </el-table-column>
                        </el-table>

                    </div>
                    <div class="footer">
                        <el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[20, 50, 100]" :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="公告通知" name="announcement" ref="announcement">
                    <!-- <el-row class="marginB20">
                    <el-button type="success" @click="changeAnnState">标记已读</el-button>
                </el-row> -->
                    <div class="merchantMainSearchBar">
                        <div class="firstSearch">
                            <el-form :inline="true" :model="annForm" class="demo-form-inline">
                                <el-form-item label="消息内容:" label-width="84px">
                                    <el-input v-model="annForm.content" placeholder="消息内容"></el-input>
                                </el-form-item>
                                <el-form-item label="请选择:" label-width="84px">
                                    <el-select v-model="annForm.status" placeholder="请选择">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                                <div class="establishTime">
                                    <div class="topTitle">接收时间:</div>
                                    <div class="lowerTimer">
                                        <el-form-item label-width="84px">
                                            <el-date-picker v-model="annForm.date1" type="datetime" @blur="inputBlur"
                                                @focus="inputFocus" placeholder="选择日期时间">
                                            </el-date-picker>
                                        </el-form-item>
                                        <el-form-item label="—" class="widthauto" style="margin-right: 10px;">
                                            <el-date-picker v-model="annForm.date2" type="datetime" @blur="inputBlur"
                                                @focus="inputFocus" placeholder="选择日期时间">
                                            </el-date-picker>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-form>
                        </div>
                        <div class="lastSearch">
                            <el-button class="maechantButon" type="primary" @click="onAnnSubmit">搜索</el-button>
                            <el-button class="maechantButon" type="success" @click="changeAnnState">标记已读
                            </el-button>
                        </div>
                    </div>
                    <div class="mainSearchBg">
                        <el-table :data="annData" style="" @selection-change="handleSelectionChange"
                            @row-dblclick="showAnnMx" tooltip-effect="light" :cell-style="cellStyle">
                            <el-table-column type="selection" width="100"></el-table-column>
                            <el-table-column property="title" label="标题" width="200" show-overflow-tooltip
                                align="center">
                                <template slot-scope="scope">
                                    <span class="span" style="white-space: nowrap" v-if="scope.row.status==0">
                                        <li class="tip"></li>{{ scope.row.title }}
                                    </span>
                                    <span class="span" style="color: #a4adbd;white-space: nowrap" v-else>
                                        <li class="tip1"></li>{{ scope.row.title }}
                                    </span>
                                </template>
                            </el-table-column>
                            <!--:formatter="formatTitle"-->
                            <el-table-column property="content" label="消息内容" show-overflow-tooltip align="center">
                                <template slot-scope="scope">
                                    <span style="white-space: nowrap"
                                        v-if="scope.row.status==0">{{scope.row.content }}</span>
                                    <span style="color: #a4adbd;white-space: nowrap;"
                                        v-else>{{ scope.row.content }}</span>
                                </template>
                            </el-table-column>
                            <!--:formatter="formatContent"-->
                            <el-table-column property="receiveTime" label="接收时间" width="200" align="center">
                                <template slot-scope="scope">
                                    <span style="white-space: nowrap"
                                        v-if="scope.row.status==0">{{ scope.row.receiveTime }}</span>
                                    <span style="color: #a4adbd;white-space: nowrap;"
                                        v-else>{{ scope.row.receiveTime }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column property="status" label="消息状态" align="center" min-width="200">
                                <template slot-scope="scope">
                                    <span style="white-space: nowrap" v-if="scope.row.status==0">未读</span>
                                    <span style="color: #a4adbd;white-space: nowrap;" v-else>已读</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="footer">
                        <el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[ 20, 50, 100]" :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>
    <style>
    </style>
    <div id="anndialog">
        <el-dialog title="详细信息" :visible.sync="anndialogVisible" width="30%" :before-close="handleClose">
            <template>
                <el-table :data="AnnDialogTableData" style="width: 100%">
                    <template v-for="(col ,index) in cols">
                        <el-table-column :prop="col.prop" :label="col.label" header-align="center">
                            <template slot-scope="scope">
                                <span style="white-space: pre-wrap">{{scope.row.content_ }}</span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
            </template>
        </el-dialog>
    </div>

    <div id="bussdialog">
        <el-dialog title="详细信息" :visible.sync="bussdialogVisible" width="30%">
            <template>
                <el-table :data="bussDialogTableData" style="width: 100%">
                    <template v-for="(col ,index) in cols">
                        <el-table-column :prop="col.prop" :label="col.label" header-align="center">
                            <template slot-scope="scope">
                                <span style="white-space: pre-wrap">{{scope.row.content_ }}</span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="updateStatusBuss">我知道了</el-button>
                </span>
            </template>
        </el-dialog>
    </div>


    <style>
        .span {
            position: relative;
            padding: 5px;
        }

        .tip {
            display: block;
            background: #fc3e54;
            border-radius: 50%;
            width: 10px;
            height: 10px;
            top: 10px;
            left: -10px;
            position: absolute;
        }

        .tip1 {
            display: block;
            background: #d4dbea;
            border-radius: 50%;
            width: 10px;
            height: 10px;
            top: 10px;
            left: -10px;
            position: absolute;
        }

        .el-dialog__body {
            padding-top: 3px;
        }

        .el-dialog__footer {
            text-align: center;
        }

        /*.el-table th {
        font-weight: bolder;
    }*/
        .el-tooltip__popper {
            max-width: 60%;
            line-height: 130%;
            margin-left: 2%;
        }
    </style>
    <!-- import common js-->
    <div th:include="_footer_include :: #jsLib"></div>

    <script>
        var oLink = document.getElementById("skinCss");
        if (getCookieVal("skinVal")) {
            oLink['href'] = "/css/custom/merhantMessageCenter/index" + getCookieVal("skinVal") + ".css";
        } else {
            oLink['href'] = "/css/custom/merhantMessageCenter/index1.css";
        }
        var annDialogVm = new Vue({
            el: '#anndialog',
            data: {
                anndialogVisible: false,
                id: "",
                status: "",
                title: "",
                content: "",
                flag: 1,
                AnnDialogTableData: [],
                cols: []
            },
            methods: {
                handleClose(done) {
                    if (annDialogVm.status == 1) {
                        done();
                        return false;
                    }
                    var param = {};
                    if (annDialogVm.flag != 1) {
                        return false;
                    } else {
                        annDialogVm.flag = 0;
                    }
                    param.ids = annDialogVm.id;
                    axios.post('/annReceive/batchUpdate', param)
                        .then(function (response) {
                            vm.$message({
                                type: 'success', message: '公告已读!', duration: 2000, onClose: function () {
                                    done();
                                    vm.initAnnTableData(1);
                                    annDialogVm.flag = 1;
                                }
                            });
                        })
                        .catch(function (error) {
                            queryFormVM.$message.error(error);
                            console.log(error);
                        });
                },
                initDialogData() {
                },
                showOutVisiable: function () {
                    this.dialogVisible = true
                }
            },
            created() {
            },
            updated() {
                // this.initDialogData()
            },
        });

        var bussDialogVm = new Vue({
            el: '#bussdialog',
            data: {
                bussdialogVisible: false,
                id: "",
                status: "",
                title: "",
                content: "",
                bussDialogTableData: [],
                cols: []
            },
            methods: {
                initDialogData() {
                    // document.getElementById("bussTitle").innerHTML=this.title;
                    // document.getElementById("bussBody").innerHTML=this.content;
                },
                updateStatusBuss() {
                    if (bussDialogVm.status == 1) {
                        bussDialogVm.bussdialogVisible = false
                        return false;
                    }
                    var param = {};
                    param.ids = bussDialogVm.id;
                    axios.post('/bussReceive/batchUpdate', param)
                        .then(function (response) {
                            bussDialogVm.$message({
                                type: 'success', message: '消息已读!', duration: 2000, onClose: function () {
                                    bussDialogVm.bussdialogVisible = false
                                    vm.initBussTableData(1);
                                }
                            });
                        }).catch(function (error) { queryFormVM.$message.error(error); });
                },
                showOutVisiable: function () {
                    this.bussdialogVisible = true
                }
            },
            created() {
                window.addEventListener("message", function (event) {
                    var data = event.data;
                    switch (data.cmd) {
                        case 'getFormJson':
                            oLink['href'] = "/css/custom/merhantMessageCenter/index" + event.data.params.data + ".css";
                            // 处理业务逻辑
                            break;
                    }
                });
            },
            updated() {
                this.initDialogData()
            },
        });
    </script>


    <script>
        var vm = new Vue({
            el: "#addDialog",
            data: {
                activeName: 'business',
                businessForm: {
                    content: "",
                    status: "0",
                    date1: "",
                    date2: ""
                },
                annForm: {
                    content: "",
                    status: "0",
                    time: "",
                    date1: "",
                    date2: ""
                },
                businessData: [],
                // [
                //     {
                //         title: '2016-05-02',
                //         content: '王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小小虎王小虎王小虎王小虎',
                //         receiveTime: '上海市普陀区金沙江路 1518 弄',
                //         status: 'sdsadsad',
                //         status: 1
                //     }, {
                //         title: '2016-05-02',
                //         content: '王小虎',
                //         receiveTime: '上海市普陀区金沙江路 1518 弄',
                //         status: 'sdsadsad',
                //         status: 0
                //     }, {
                //         title: '2016-05-02',
                //         content: '王小虎',
                //         receiveTime: '上海市普陀区金沙江路 1518 弄',
                //         status: 'sdsadsad',
                //         status: 0
                //     }, {
                //         title: '2016-05-02',
                //         content: '王小虎',
                //         receiveTime: '上海市普陀区金沙江路 1518 弄',
                //         status: 'sdsadsad',
                //         status: 1
                //     }
                // ],

                annData: [],
                falg: 0,
                multipleSelection: [],
                currentPage: 1,
                total: 0,
                pageNum: 1,
                pageSize: 20,

                options: [{
                    value: '-1',
                    label: '全部'
                }, {
                    value: '0',
                    label: '未读'
                }, {
                    value: '1',
                    label: '已读'
                }],

            },
            methods: {
                inputFocus() {
                    console.log(22222, '');
                    // $('.establishTime .lowerTimer').css('border-color','#4b80ff')   
                },
                inputBlur() {
                    console.log(33333);
                    // $('.establishTime .lowerTimer').css('border-color','#dcdde2')
                },
                cellStyle(row, column, rowIndex, columnIndex) {
                    if (row.column.label === "消息内容") {
                        // return 'font-weight:bold'
                        return 'white-space: nowrap'
                    } else {
                        return ''
                    }
                },
                showAnnMx(row, event) {
                    annDialogVm.id = row.id;
                    annDialogVm.title = row.title;
                    annDialogVm.content = row.content;
                    annDialogVm.status = row.status;
                    annDialogVm.AnnDialogTableData = [{ content_: row.content }]
                    annDialogVm.cols = [{ label: row.title, prop: "content_", type: "normal" }];
                    annDialogVm.anndialogVisible = true;
                },

                showBussMx(row, event) {
                    bussDialogVm.id = row.id;
                    bussDialogVm.title = row.title;
                    bussDialogVm.content = row.content;
                    bussDialogVm.status = row.status;
                    bussDialogVm.bussDialogTableData = [{ content_: row.content }]
                    bussDialogVm.cols = [{ label: row.title, prop: "content_", type: "normal" }];
                    bussDialogVm.bussdialogVisible = true;
                },
                onAnnSubmit() {
                    var param = this.annForm;
                    param.pageSize = this.pageSize;
                    param.pageNum = this.pageNum;
                    console.log(param)
                    axios.post("/annReceive/list", param)
                        .then(function (response) {

                            if (response.data.code == -1) {
                                vm.$message.error(response.data.msg)
                                return false;
                            }

                            var data = response.data.data
                            vm.annData = data.data;
                            console.log(vm.businessData)
                            vm.total = data.total;
                            vm.currentPage = data.currentPage;
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                        .then(function () {
                        });
                },
                changeAnnState() {
                    var rows = this.multipleSelection;
                    if (rows.length < 1) {
                        this.$message({ type: "warning", message: "请选择消息" })
                    } else {
                        var rowIds = [];
                        for (var i = 0; i < rows.length; i++) {
                            rowIds.push(rows[i].id)
                        }
                        //调用后台数据删除操作。
                        var param = {};
                        param.ids = rowIds.join(",");
                        axios.post('/annReceive/batchUpdate', param)
                            .then(function (response) {
                                vm.$message({
                                    type: 'success', message: '更新完成!', duration: 2000, onClose: function () {
                                        vm.initAnnTableData(1);
                                    }
                                });
                            })
                            .catch(function (error) {
                                queryFormVM.$message.error(error);
                                console.log(error);
                            });
                    }
                },
                onBussSubmit() {
                    var param = this.businessForm;
                    param.pageSize = this.pageSize;
                    param.pageNum = this.pageNum;
                    console.log(param)
                    axios.post("/bussReceive/list", param)
                        .then(function (response) {
                            if (response.data.code == -1) {
                                vm.$message.error(response.data.msg)
                                return false;
                            }

                            var data = response.data.data
                            vm.businessData = data.data;
                            console.log(vm.businessData)
                            vm.total = data.total;
                            vm.currentPage = data.currentPage;
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                        .then(function () {
                        });
                },
                changeBussState() {
                    var rows = this.multipleSelection;
                    if (rows.length < 1) {
                        this.$message({ type: "warning", message: "请选择消息" })
                    } else {
                        var rowIds = [];
                        for (var i = 0; i < rows.length; i++) {
                            rowIds.push(rows[i].id)
                        }
                        //调用后台数据删除操作。
                        var param = {};
                        param.ids = rowIds.join(",");
                        axios.post('/bussReceive/batchUpdate', param)
                            .then(function (response) {
                                vm.$message({
                                    type: 'success', message: '更新完成!', duration: 2000, onClose: function () {
                                        vm.initBussTableData(1);
                                    }
                                });
                            })
                            .catch(function (error) {
                                queryFormVM.$message.error(error);
                                console.log(error);
                            });
                    }
                },
                handleSelectionChange(val) {
                    console.info(val);
                    this.multipleSelection = val;
                },
                formatStatus(row, column) {
                    return row.status == 0 ? "未读" : "已读";
                },
                formatTitle(row, column) {
                    return row.status == 0 ? "<span class='span'> <i class=\"tip\"></i> " + row.title + "</span>" : "<span class='span'><i class=\"tip1\"></i> " + row.title + "</span>"
                },
                handleClick(tab, event) {
                    console.log(tab, event);
                    // console.log(tab.name)
                    // tab.label="babbababab"
                    if (tab.name == "announcement") {
                        console.log("------------------announcement-----------------------")
                        this.initAnnTableData(1, 20);
                    } else {//business
                        console.log("------------------business-----------------------")
                        this.initBussTableData(1, 20);
                    }
                },
                handleSizeChange(val) {
                    //下拉框  每页 10,20条切换 调用
                    console.log(`每页 ${val} 条`);
                    this.pageSize = val;
                    if (this.activeName == "business") {
                        this.initBussTableData(1);
                    } else {
                        this.initAnnTableData(1);
                    }

                },
                handleCurrentChange(val) {
                    //点击 页码
                    console.log(`当前页: ${val}`);
                    if (this.activeName == "business") {
                        this.initBussTableData(val);
                    } else {
                        this.initAnnTableData(val);
                    }
                },
                initBussTableData(v_pageNum, v_pageSize) {
                    var param = this.businessForm;
                    if (v_pageSize) {
                        param.pageSize = v_pageSize
                    } else {
                        param.pageSize = this.pageSize;
                    }

                    param.pageNum = v_pageNum;
                    console.log(param)
                    axios.post("/bussReceive/list", param)
                        .then(function (response) {
                            if (response.data.code == 0) {
                                var data = response.data.data
                                vm.businessData = data.data;
                                if (data.data.length > 0) {
                                    vm.total = data.total;
                                    vm.pageSize = data.pageSize;
                                    vm.currentPage = data.currentPage;
                                } else {
                                    vm.total = 0;
                                    vm.pageSize = 20;
                                    vm.currentPage = 0;
                                }
                            }
                        })
                        .catch(function (error) {
                        }).then(function () {
                        });
                },
                initAnnTableData(v_pageNum, v_pageSize) {
                    var param = this.annForm;
                    if (v_pageSize) {
                        param.pageSize = v_pageSize
                    } else {
                        param.pageSize = this.pageSize;
                    }
                    param.pageNum = v_pageNum;

                    console.log(param)
                    axios.post("/annReceive/list", param)
                        .then(function (response) {
                            if (response.data.code == 0) {
                                var data = response.data.data
                                vm.annData = data.data;
                                if (data.data.length > 0) {
                                    vm.total = data.total;
                                    vm.pageSize = data.pageSize;
                                    vm.currentPage = data.currentPage;
                                } else {
                                    vm.total = 0;
                                    vm.pageSize = 20;
                                    vm.currentPage = 0;
                                }
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                        .then(function () {
                        });
                }
            },
            created() {
                console.info("create method");
                this.initBussTableData(1);
                this.initAnnTableData(1);
            },
            mounted() {
                console.info("mounted method");
            },
            updated() {
                //vm.businessData.length==0&&
                if (vm.falg == 0) {
                    vm.falg = 1;
                    setTimeout(function () {
                        if (vm.businessData.length == 0 && vm.annData.length != 0) {
                            vm.activeName = 'announcement';
                            vm.initAnnTableData(1, 20);
                        } else {
                            vm.activeName = 'business';
                            vm.initBussTableData(1, 20);
                        }
                    }, 1000);
                }
                console.info("updated method");
                var param = {};
                axios.post("/annReceive/unreadCount", param).then(function (response) {
                    var data = response.data.data
                    var str = "";
                    if (data && data != 0) {
                        str = "(" + data + ")"
                    }
                    document.getElementById("tab-announcement").innerHTML = "公告通知<span style='color: red'>" + str + "</span>";
                })
                axios.post("/bussReceive/unreadCount", param).then(function (response) {
                    var data = response.data.data
                    var str = "";
                    if (data && data != 0) {
                        str = "(" + data + ")"
                    }
                    document.getElementById("tab-business").innerHTML = "业务消息<span style='color: red'>" + str + "</span>";
                })
                window.parent.homePageVM.messageCount()
            },//created方法 结束
            mounted() {
                document.getElementById('addDialog').style.display = 'block';
            }
        });

    </script>
</body>

</html>